<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="static/js/echarts.min.js"></script>
    
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
    var worldMapContainer = document.getElementById('main');
    //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
    var resizeWorldMapContainer = function () {
        worldMapContainer.style.width = (window.innerWidth-100)+'px';
        worldMapContainer.style.height = (window.innerHeight-100)+'px';
    };
    //设置容器高宽
    resizeWorldMapContainer();
    
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(worldMapContainer);
    option = {
    	    title: {
    	        text: '动态数据',
    	        subtext: '纯属虚构'
    	    },
    	    tooltip: {
    	        trigger: 'axis',
    	        axisPointer: {
    	            type: 'cross',
    	            label: {
    	                backgroundColor: '#283b56'
    	            }
    	        }
    	    },
    	    legend: {
    	        data:['最新成交价', '预购队列']
    	    },
    	    toolbox: {
    	        show: true,
    	        feature: {
    	            dataView: {readOnly: false},
    	            restore: {},
    	            saveAsImage: {}
    	        }
    	    },
    	    dataZoom: {
    	        show: false,
    	        start: 0,
    	        end: 100
    	    },
    	    xAxis: [
    	        {
    	            type: 'category',
    	            boundaryGap: true,
    	            data: []
    	        },
    	        {
    	            type: 'category',
    	            boundaryGap: true,
    	            data: []
    	        }
    	    ],
    	    yAxis: [
    	        {
    	            type: 'value',
    	            scale: true,
    	            name: '价格',
    	            max: 30,
    	            min: 0,
    	            boundaryGap: [0.2, 0.2]
    	        },
    	        {
    	            type: 'value',
    	            scale: true,
    	            name: '预购量',
    	            max: 1200,
    	            min: 0,
    	            boundaryGap: [0.2, 0.2]
    	        }
    	    ],
    	    series: [
    	        {
    	            name:'预购队列',
    	            type:'bar',
    	            xAxisIndex: 1,
    	            yAxisIndex: 1,
    	            data:(function (){
    	                var res = [];
    	                var len = 10;
    	                while (len--) {
    	                    res.push(Math.round(Math.random() * 1000));
    	                }
    	                return res;
    	            })()
    	        },
    	        {
    	            name:'最新成交价',
    	            type:'line',
    	            data:(function (){
    	                var res = [];
    	                var len = 0;
    	                while (len < 10) {
    	                    res.push((Math.random()*10 + 5).toFixed(1) - 0);
    	                    len++;
    	                }
    	                return res;
    	            })()
    	        }
    	    ]
    	};
    var app = 11;
    setInterval(function (){
        axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');

        var data0 = option.series[0].data;
        var data1 = option.series[1].data;
        data0.shift();
        data0.push(Math.round(Math.random() * 1000));
        data1.shift();
        data1.push((Math.random() * 10 + 5).toFixed(1) - 0);

        option.xAxis[0].data.shift();
        option.xAxis[0].data.push(axisData);
        option.xAxis[1].data.shift();
        option.xAxis[1].data.push(app++);

        myChart.setOption(option);
        //用于使chart自适应高度和宽度
        window.onresize = function () {
        //重置容器高宽
        resizeWorldMapContainer();
        myChart.resize();
        };
    }, 2100);
    </script>
</body>
</html>